<template>
  <div class="box-fillIn">
    <el-card>
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="基础信息" />
        <el-step title="分组配置" />
        <el-step title="表头配置" />
        <el-step title="表行配置" />
      </el-steps>
      <!-- <el-button style="margin-top: 12px" @click="next">Next step</el-button> -->
    </el-card>
    <!-- 填写内容区 -->
    <el-card class="fillIn-card">
      <!-- keep-alive 包裹的组件将会被缓存！即B组件中更改内容，切换回A组件页面，
              再切换回B组件，是之前缓存的状态，而不是生成了新的B组件实例-->
      <!-- <essentialInformation></essentialInformation> -->
      <keep-alive>
        <component :is="dom[active]"></component>
      </keep-alive>
      <div class="btn-group">
        <el-button type="primary" v-if="active != 0" @click="back"
          >上一步</el-button
        >
        <el-button type="primary" @click="next" v-if="!(active == 3)"
          >下一步</el-button
        >
        <el-button type="primary">保存</el-button>
        <el-button>返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, markRaw, shallowRef, onBeforeUnmount } from "vue";
// 填写信息
import essentialInformation from "./modules/essentialInformation/index.vue";
// 上传 附件
import accessory from "./modules/accessory/index.vue";
// 表头配置 组件
import tableColumConfiguration from "./modules/tableColumConfiguration/index.vue";
// 文本编辑
import wangEditor from "./modules/wangEditor/index.vue";
// import wordEditor from "@/views/main/components/wordEditor/index.vue";
// import tinymce from "@/components/tinymce/index.vue";

// 步骤条
const active = ref(0);
// 渲染那个组件
let dom = shallowRef([
  essentialInformation,
  accessory,
  tableColumConfiguration,
  wangEditor,
]);

// 上一步
const back = () => {
  active.value = active.value - 1;
};
// 下一步
const next = () => {
  if (active.value++ >= 3) active.value = 0;

  console.log("active.value", active.value);
};
</script>

<style lang="scss" scoped>
// .box-fillIn {
//   display: flex;
//   flex-direction: column;
//   .fillIn-card {
//     flex: 1;
//   }
// }
.btn-group {
  display: flex;
  justify-content: flex-end;
  margin: 3% 0 0 0;
}
</style>
